<script setup lang="ts">
import CdlDescriptions from "@/components/descriptions";
import CdlTable from "@/components/table"
import type {DescriptionsTree} from "@/interfaces/components/Descriptions";
import type {FormData} from "@/interfaces/components/Page";
import {useTaskDetailsApi, useTaskEndApi} from "@/api/project/task";
import {useRoute, useRouter} from "vue-router";
import {Task, Trip, Vehicle, WayBill} from "@/interfaces/views/task/task";
import {ref} from "vue";
import {TableTree} from "@/interfaces/components/Table";
import {ElMessage} from "element-plus/es";
import {ElMessageBox} from "element-plus";
import Routing from "@/components/gps/routing.vue";

const route = useRoute()
const router = useRouter()
const loading = ref(true)

const baseDescriptionsTree: DescriptionsTree<Task> = [
  {label: "关联订单", prop: "projectName"},
  {label: "任务ID", prop: "id"},
  {label: "任务名称", prop: "name"},
  {label: "任务状态", prop: "state" ,dict: "task_state"},
  {label: "开始日期", prop: "startTime"},
  {label: "结束日期", prop: "endTime"},
  {label: "交付验收", prop: "acceptType", dict: "task_deliver_type"},
  {label: "运单收入", prop: "revenue"},
  {label: "货物类型", prop: "cargoType"},
  {label: "货物名称", prop: "cargoName"},
]
const vehicleTabTree: TableTree<Vehicle> = {
  colRule: [
    {ti: "关联车辆", prop: "car"},
    {ti: "关联司机", prop: "driverName"},
    {ti: "司机手机号", prop: "phone"},
    {ti: "是否是队长", prop: "captain", dict: "overall_yes_or_no"},
    {ti: "趟次额度", prop: "trip"},
    {ti: "剩余趟次", prop: "remainder"}
  ]
}
// const tripDescriptionsTree: DescriptionsTree<Trip> = [
//   {label: "路线", prop: "startPoint"},
//   {label: "卸货点", prop: "endPoint"},
//   {label: "途经点", prop: "transitPoint"},
// ]
const wayBillTabTree: TableTree<WayBill> = {
  colRule: [
    {ti: "运单编号", prop: "id", minWidth: 180},
    {ti: "运单类型", prop: "type", dict: "waybill_type"},
    {ti: "运单状态", prop: "state", dict: "waybill_state"},
    {ti: "关联车辆", prop: "car"},
    {ti: "关联司机", prop: "driverName"},
    // {ti: "关联任务", prop: "taskName"},
    {ti: "创建人", prop: "createName"},
    {ti: "接单时间", prop: "startTime", minWidth: 160},
    {ti: "完成时间", prop: "endTime", minWidth: 160},
    {ti: "时间告警", prop: ""},
    {ti: "是否结算", prop: ""},
    {ti: "备注", prop: "remark"},
  ],
  control:[
    {name: "详情", type: "info", prop: "id", method: jumpWaybillInfo},
  ]
}

const baseDescriptionsData = ref({})
const vehicleData = ref([])
const tripDescriptionsData = ref({})
const wayBillData = ref([])

init()
function init(){
  useTaskDetailsApi(route.query.id as number | string).then(res =>{
    const {cars, waybills, ...rest} = res.data
    baseDescriptionsData.value = rest
    vehicleData.value = cars
    wayBillData.value = waybills
    loading.value = false
  })
}

/**
 * 跳转运单详情
 * @param id
 */
function jumpWaybillInfo(id: string){
  router.push({
    path: "/projectManage/task/waybillDetails",
    query: {
      id: id
    }
  })
}

/**
 * 结束任务
 */
function endTask(){
  const sum = vehicleData.value.reduce((total: number, item: any)=>{
    return total + item.remainder
  }, 0)
  if(sum){
    ElMessageBox.confirm(`此任务下还有${sum}次未完成的运单，确定要结束任务吗?`, '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(()=>{
      useTaskEndApi(route.query.id as string).then(()=>{
        ElMessage.success("结束成功！")
        fallbackPage()
      })
    })
  }else {
    useTaskEndApi(route.query.id as string).then(()=>{
      ElMessage.success("结束成功！")
      fallbackPage()
    })
  }
}

/**
 * 回退页面
 */
function fallbackPage(){
  router.back()
}

/**
 * 跳转修改页面
 */
function openTaskUpdate(){
  router.push({
    path: "/projectManage/task/createAndModifyTask",
    query: {
      id: route.query.id
    }
  })
}
</script>

<template>
  <el-card v-if="loading"><el-skeleton :rows="10" animated /></el-card>
  <el-card v-else style="position: relative">
    <button class="back_btn" @click="fallbackPage"></button>
    <div class="main_control">
      <el-button type="success" @click="openTaskUpdate" v-auth="'project:task:update'">编辑</el-button>
      <el-button type="danger" @click="endTask" v-auth="'project:task:update'"
                 v-if="baseDescriptionsData.state === 1">结束任务</el-button>
      <el-button type="danger" v-auth="'project:task:delete'">删除</el-button>
    </div>
    <h1 class="top_line">基本信息</h1>
    <el-divider></el-divider>
    <CdlDescriptions :model="baseDescriptionsData" :template-tree="baseDescriptionsTree"
                     :column="4"></CdlDescriptions>
    <h1 class="mgt">关联车辆 / 司机</h1>
    <el-divider></el-divider>
    <CdlTable :data="vehicleData" :template-tree="vehicleTabTree"></CdlTable>
    <h1 class="mgt">运单</h1>
    <el-divider></el-divider>
    <CdlTable :data="wayBillData" :template-tree="wayBillTabTree" controlFixed :control-width="100"></CdlTable>
    <h1 class="mgt">行程信息</h1>
    <el-divider :fenceData="{}"></el-divider>
    <Routing :routing-id="baseDescriptionsData.routeId"></Routing>
  </el-card>
</template>

